<template>
  <div>
  	<v-Header :item="headerMess"></v-Header>	
    <div class="wrapOptional">
        	<v-myMessArrowList :item='Understand' @toNext='understand'></v-myMessArrowList>
  	</div>
  	<!--<div>
        <v-myMessArrowList :item='RuleA' @toNext='ruleA'></v-myMessArrowList>
  	</div>-->
  	<div>
        <v-myMessArrowList :item='RuleTD' @toNext='ruleTD'></v-myMessArrowList>
  	</div>
  	<div>
        <v-myMessArrowList :item='Safe' @toNext='safe'></v-myMessArrowList>
  	</div>
  	<div>
        <v-myMessArrowList :item='About' @toNext='about'></v-myMessArrowList>
  	</div>
  </div>
</template>
<script>
	import myMessArrowList from '@/components/myMessArrowList'
	import Header from '@/components/Header'
	export default {
		data(){
			return {
				headerMess:{
		        src:require("../../assets/nav_back.png"),
		        headerText: '新手引导',
		        right: ''
		    },
	      isActive: false,
	      Understand: {
	        text: '一分钟了解谋略家'
	      },
	      RuleA: {
	        text: 'A股交易规则'
	      },
	      RuleTD: {
	        text: 'T+D A股交易规则'
	      },
	      Safe: {
	        text: '安全保证'
	      },
	      About: {
	        text: '关于我们'
	      }
	    }
		},
		methods:{
			understand() {
	      this.$router.push({path:'/understand'})
	    },
	    ruleA() {
	      this.$router.push({path:'/ruleA'})
	    },
	    ruleTD() {
	      this.$router.push({path:'/ruleTD'})
	    },
	    safe() {
	      this.$router.push({path:'/safe'})
	    },
	    about() {
	      this.$router.push({path:'/about'})
	    }
		},
		components:{
			'v-myMessArrowList': myMessArrowList,
			"v-Header":Header,
		},
	  beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
	}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.header{
	padding:0 @p30;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:@hwrap;
	color:#fff;
	font-size:.48rem;
	img,.img{
		width: 30px;
		height: 30px;
	}
}
.wrapOptional{
	margin-top: @fsize;
}
</style>
